<template>
    <div class="choosebox ">
        <div class="item3">
            <div class="cheight flex aic">
                <span class="f15 mr-5 color">Client:</span>
                <el-select v-model="sInfo.userValue"  v-loadmore="()=>{emits('getUser1')}" @change="(val) => { emits('userinfo', val) }"
                    @focus="() => { emits('getUser') }" :remote-method="(val) => { emits('getUser', val) }" remote
                    remote-show-suffix filterable style="border: none;" :disabled="sorderState !== 1 ? true : false"
                    class="m-2" size="small" placeholder="Please select Client">
                    <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="flex aic">
                <span class="f15 color">Address:</span>
                <span class="f13  color address">{{ userAddress }}</span>
            </div>
            <div class="cheight flex aic">
                <span class="f15 mr-5 color">Supplier:</span>
                <el-select v-model="sInfo.suppierValue" @change="(val) => { emits('supInfo', val) }"
                    @focus="() => { emits('getSuppier') }" :disabled="sorderState !== 1 ? true : false"
                    style="border: none;" class="m-2" size="small" placeholder="Please select Supplier">
                    <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="flex aic">
                <span class="f15 color">Address:</span>
                <span class="f13 color address"> {{ suppierInfo }}</span>
            </div>
        </div>
        <div class="item4">
            <span class="f15 color">Delivery Address:</span>
            <div class="warp1">
                <p class="f13 linh color">{{ userAddress }} </p>
                <p class="f13 linh color">{{ suppierInfo }}</p>
            </div>
        </div>
    </div>
    <div class="choosebox ">
        <div class="item1">
            <div class="cheight flex aic">
                <el-radio-group v-model="sInfo.orderType" class="ml-4 " :disabled="sorderState !== 1 ? true : false">
                    <!-- 批发 -->
                    <el-radio :label="0" size="large">Wholesale</el-radio>
                    <!-- 零售 -->
                    <el-radio :label="1" size="large">Retail</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="item2">
            <div class="cheight flex aic">
                <span class="f15 mr-5 color">Payment:</span>
                <el-select v-model="sInfo.paymentvalue" @change="(val) => { emits('paymentinfo', val) }"
                    @focus="() => { emits('getPayment') }" :disabled="sorderState !== 1 ? true : false"
                    style="border: none;" class="m-2" size="small" placeholder="Please select bank">
                    <el-option v-for="item in paymentList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="sInfo.currencyType" @focus="() => { emits('getCurrent') }" style="width:20%;border: none;"
                    :disabled="sorderState !== 1 ? true : false" class="m-2 ml-10" size="small" placeholder="Currency">
                    <el-option v-for="item in currentList" :key="item" :label="item" :value="item" />
                </el-select>
            </div>
            <p class="f13 linh color warp">{{ payinfo }}</p>
        </div>
    </div>
</template>

<script setup>
// 自定义指令，下拉框上拉加载
const vLoadmore = (el, binding) => {
    const child = el.querySelector('.select-trigger')
    const id = child.getAttribute('aria-describedby')
    const poper = document.getElementById(id)
    const SELECTDOWN_DOM = poper && poper.querySelector('.el-scrollbar .el-select-dropdown__wrap')
    SELECTDOWN_DOM && SELECTDOWN_DOM.addEventListener('scroll', function () {
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (CONDITION) {
            binding.value();
        }
    })
}
const props = defineProps({
    sInfo: Object,
    sorderState: Number,
    userList: Object,
    userAddress: String,
    supplierList: Object,
    suppierInfo: String,
    paymentList: Object,
    payinfo: String,
    currentList: Object
})
const emits = defineEmits(['userinfo', 'getUser1','getUser', 'supInfo', 'getSuppier', 'paymentinfo', 'getPayment', 'getCurrent'])
</script>
